<template>
  <div class="boss">
    <head-page
      :title="`${num}.${toptitle}`"
      backUrl="/my"
      style="border-bottom: 2px solid #dad9df"
      id="backstyle"
    >

    </head-page>
    <div v-if="dataType == 'Object'">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in info.minePic" :key="index">
          <img :src="getImgUrl(item)" alt="" />
        </van-swipe-item>
      </van-swipe>
      <p
        class="content richText bold-size"
        v-if="info.mineText"
        v-html="info.mineText"
      ></p>
      <div v-else class="p-20 tac">暂无数据</div>
    </div>
    <div class="war title-center" v-else-if="dataType == 'Array'">
      <!-- 营销典案特殊处理 -->
      <div
        class="area-center"
        v-if="$route.query.id != 'f3f8ac82-695d-4614-87a4-d9bbbb5c77fb'"
      >
        <div class="xiao m-t-10" v-for="(item, index) in info" :key="index">
          <div class="flex aic m-t-07" @click="coffee(toptitle, index + 1, item,num)">
            <!-- <div class="num">{{ index + 1 }}.</div> -->
            <div class="zhong">
              {{ item.title ? item.title : item.father }}
            </div>
          </div>
          <div v-if="item.list && item.list.length" class="m-t-20">
            <div
              class="sub-title flex aic m-t-07"
              v-for="(val, i) in item.list"
              :key="i"
              @click="coffee(toptitle, i + 1, val,num)"
            >
              <!-- <div>{{ i + 1 }}、</div> -->
              <div>{{ val.name }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="area-center" v-else>
        <div class="xiao" v-for="(item, index) in info" :key="index">
          <div
            :class="['flex aic ', curr == index ? 'active' : '']"
            @click="detail(item, index)"
          >
            <div class="yuan"></div>
            <div class="zhong">
              {{ item.title ? item.title : item.father }}
            </div>
          </div>
        </div>
        <div class="detail m-t-07">
          <div v-if="!isVideoCurr">
            <div v-if="getRawType(detailList) == 'Array'">
              <div v-for="(val, i) in detailList" :key="i">
                <div class="flex aic m-t-07" @click="coffee(toptitle, i + 1, val,num)">
                  <div>{{ i + 1 }}.</div>
                  <div>{{ val.name }}</div>
                </div>
              </div>
            </div>
            <div v-else>
              <div
                class="richText"
                v-if="dataHTML(detailList.content)"
                v-html="dataHTML(detailList.content)"
              ></div>
              <div v-else class="p-20 tac">暂无数据</div>
            </div>
          </div>
          <div v-else class="tv-group">
            <div
              class="tv-item"
              v-for="(item, index) in detailList"
              :key="index"
              @click="playVideo(item)"
            >
              <div >
                {{ index + 1 }}.{{ item.marketingVideoTitle }}
              </div>
              <div class="rel m-t-07 img-box">
                <div class="mask fcc">
                  <van-icon name="play-circle-o" size="42" color="#fff" />
                </div>
                <img :src="imgurl + item.marketingVideoPic" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 视频预览弹窗 -->
    <van-dialog
      v-model="show"
      @closed="closeVideo"
      :showConfirmButton="false"
      closeOnClickOverlay
    >
      <div class="preview">
        <video
          class="video"
          id="my-video"
          autoplay
          x5-video-orientation="landscape"
          preload="auto"
          :src="imgurl + posterUrl"
          controls="controls"
        ></video>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { getMineDetail, videolist, sharegetDetails } from "@/api/index";
export default {
  data() {
    return {
      list: "",
      pic: [],
      toptitle: this.$route.query.i,
      id: this.$route.query.id,
      list: "",
      info: {},
      dataType: "",
      curr: 0,
      detailList: [],
      show: false,
      posterUrl: "",
      isVideoCurr: false,
      num:this.$route.query.num,
    };
  },
  methods: {
    getImgUrl(img) {
      return this.montageImgUrl(img);
    },
    coffee(i, text, item,num) {
      if (!item.id) return false;
      this.$router.push({
        path: "/coffeedetails",
        query: {
          i,
          text,
          context: item.title ? item.title : item.name,
          ID: item.id,
          num
        },
      });
    },
    detail(item, index) {
      this.curr = index;
      this.detailList = [];
      let name = item.father ? item.father : item.title;
      this.isVideo(name);
      if (!this.isVideoCurr && item.list) {
        this.detailList = item.list;
      } else if (this.isVideoCurr) {
        videolist({
          Id: this.$route.query.id,
        }).then((res) => {
          if (res.data.code == 200) {
            this.detailList = res.data.rows;
          }
        });
      } else {
        sharegetDetails({
          Id: item.id,
        }).then((res) => {
          if (res.data.code == 200) {
            this.detailList = res.data.data;
          }
        });
      }
    },
    closeVideo() {
      document.getElementById("my-video").pause();
      this.show = false;
    },
    playVideo(item) {
      this.posterUrl = item.marketingVideo;
      this.show = true;
      // document.getElementById('my-video').play()
    },
    isVideo(val) {
      this.isVideoCurr = val.indexOf("视频") != -1;
    },
  },
  mounted() {
    getMineDetail({
      Id: this.$route.query.id,
    }).then((res) => {
      if (res.data.code == 200) {
        this.info = res.data.data;
        this.dataType = this.getRawType(this.info);
        if (this.dataType == "Array") {
          this.detail(this.info[0], 0);
        }
        if (this.dataType == "Object") {
          this.info.minePic = this.splitImg(this.info.minePic);
          this.info.mineText = this.dataHTML(res.data.data.mineText);
        }
      }
    });
  },
};
</script>

<style scoped>
.boss {
  width: 100%;
}
.my-swipe img {
  width: 100%;
  height: 2rem;
}

.my-swipe img {
  width: 100%;
  height: 2rem;
}
.content {
  padding: 0.1rem;
}
.bottom {
  width: 100%;
  min-height: 6rem;
  display: flex;
  padding-bottom: 0.55rem;
  flex-direction: column;
  align-items: center;
}
.center {
  height: 100%;
}
.yuan {
  width: 0.15rem;
  height: 0.15rem;
  border-radius: 50%;
  background-color: black;
}
.xiao {
  width: 100%;
 
}
.xiao .num {
  width: 5%;
  height: 0.3rem;
  margin-left: 0.1rem;
  font-weight: 700;
  text-align: center;
  line-height: 0.3rem;
}
.sub-title {
  margin-left: 0.3rem;
}
/* 中间区域 */
.zhong {
  width: 95%;
  height: 100%;
  line-height: 0.3rem;
  padding-left:.05rem;
}
.active {
  color: red;
}
.detail {
  padding: 0.1rem;
}

.tv-group {
  width: 100%;
  padding: 1.5%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}
.tv-item {
  width: 47%;
  padding: 1.5%;
  display: inline-block;
}
.tv-item img {
  width: 100%;
  height: 2rem;
}
.tv-item .mask {
  width: 100%;
  height: 2rem;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
}
.img-box {
  width: 100%;
  height: 2rem;
  border: 1px solid #eee;
}

.van-dialog {
  background: none;
  border-radius: 0;
}
.preview video {
  width: 100%;
  min-height: 2rem;
}
</style>